<template>
  <div id="app">
    <!-- 全局顶部导航栏 -->
    <header class="top-navbar" v-if="showNavbar">
      <div class="navbar-left">
        <img alt="Vue logo" src="./assets/logo.png" class="logo">
        <router-link to="/" class="brand-name">乡村振兴旅游门户</router-link>

        <!-- 导航菜单 -->
        <nav class="main-nav">
          <router-link to="/tickets" class="nav-item"><icon class="el-icon-tickets"/>门票订购</router-link>
          <router-link to="/scenic" class="nav-item"><icon class="el-icon-info"/>景区介绍</router-link>
          <router-link to="/foods" class="nav-item"><icon class="el-icon-food"/>餐饮</router-link>
          <router-link to="/accommodations" class="nav-item"><icon class="el-icon-office-building"/>住宿</router-link>
          <router-link to="/culture" class="nav-item"><icon class="el-icon-present"/>文创</router-link>
          <router-link to="/agriculturals" class="nav-item"><icon class="el-icon-goods"/>农产品商店</router-link>
          <router-link to="/map" class="nav-item"><icon class="el-icon-map-location"/>地图导览</router-link>
          <router-link to="/car" class="nav-item"><icon class="el-icon-shopping-cart-2"/>购物车</router-link>
        </nav>
      </div>

      <div class="navbar-right">
        <!-- 如果已登录 -->
        <div v-if="token" class="user-info">
          <div class="user-dropdown">
            <span class="welcome-text">欢迎您, </span>
            <span class="username" @mouseenter="showDropdown = true">{{ user.nickName }}</span>
            <div class="dropdown-menu" v-show="showDropdown" @mouseleave="showDropdown = false">
              <router-link to="/profile" class="dropdown-item">个人中心</router-link>
              <a href="#" @click.prevent="handleLogout" class="dropdown-item">退出登录</a>
            </div>
          </div>
        </div>
        <!-- 如果未登录 -->
        <div v-else>
          <router-link to="/login" class="login-link">登录</router-link>
        </div>
      </div>
    </header>

    <!-- 路由视图 -->
    <router-view/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'App',
  data() {
    return {
      showDropdown: false
    }
  },
  computed: {
    ...mapState({
      token: state => state.token,
      user: state => ({
        nickName: state.nickName,
        name: state.name
      })
    }),
    // 在登录页不显示导航栏
    showNavbar() {
      return this.$route.name !== 'LoginView';
    }
  },
  methods: {
    ...mapActions(['logout']),
    async handleLogout() {
      await this.logout();
      this.$router.push('/login');
    }
  },
  mounted() {
    // 页面加载时检查用户信息
    if (this.token && !this.user.nickName) {
      this.$store.dispatch('getInfo').catch(() => {
        console.warn('获取用户信息失败');
      });
    }
  }
}
</script>

<style>
/* 全局样式重置 */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* 导航栏样式 */
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.brand-name {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  text-decoration: none;
  margin-right: 30px;
}

.main-nav {
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 0 15px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #409EFF;
}

.nav-item.router-link-exact-active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.user-info {
  position: relative;
}

.user-dropdown {
  position: relative;
  cursor: pointer;
}

.welcome-text {
  color: #666;
}

.username {
  color: #409EFF;
  font-weight: 500;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 1000;
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
  color: #409EFF;
}

.navbar-right .login-link {
  color: #409EFF;
  text-decoration: none;
}

.navbar-right .login-link:hover {
  text-decoration: underline;
}

/* 页面内容与导航栏的间距 */
.router-view {
  padding-top: 20px;
}
</style>
